<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
    
    <title>仿微博评论</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="comment.css">
</head>
<script src="template-web.js"></script>
<script src="jquery-1.9.0.js"></script>
<script type="text/html" id="comtlist">
    <% for(var i=0; i<list.length; i++) { %>
        <div class="comment-show-con clearfix">
            <div class="comment-show-con-img pull-left"><img src="header-img-comment_03.png" alt=""></div>
            <div class="comment-show-con-list pull-left clearfix">
                <div class="pl-text clearfix">
                    <a href="#" class="comment-size-name">张三 : </a>
                    <span class="my-pl-con">&nbsp;<%=list[i].msg%></span>
                </div>
                <div class="date-dz">
                    <span class="date-dz-left pull-left comment-time">2017-5-2 11:11:39</span>
                    <div class="date-dz-right pull-right comment-pl-block">
                        <a href="javascript:;" class="removeBlock">删除</a>
                        <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>
                        <span class="pull-left date-dz-line">|</span>
                        <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">666</i>)</a>
                    </div>
                </div>
                <div class="hf-list-con"></div>
            </div>
        </div>
    <% } %>
</script>

<body>
<div class="commentAll">
    <!--评论区域 begin-->
    <div class="reviewArea clearfix">
        <div class="flex-text-wrap"><pre class="pre"><span></span><br></pre><textarea class="content comment-input" placeholder="Please enter a comment…" onkeyup="keyUP(this)"></textarea></div>
        <a href="javascript:;" class="plBtn">评论</a>
    </div>
    <!--评论区域 end-->
    <!--回复区域 begin-->
    <div class="comment-show">
       
    </div>
    <!--回复区域 end-->
</div>
<script>
    //第一步， 引入template-web.js
    //第二部， 编写模板数据 <script type="text/html">
        /*

        */
    //第三步， var html字符串 = 调用template(模板ID，数据);
    //第四步， 讲html字符串写入到dom元素

    $(".plBtn").click(function(){
        var req = new XMLHttpRequest();
        req.open("get", "http://localhost:9090/tweets");
        req.onload = function(){
            var data = JSON.parse(req.responseText);
            console.log(data);

            var htmlstr = template("comtlist", {
                list : data
            });
            $(".comment-show").html(htmlstr);
        }
        req.send();
    })
</script>
</body></html>